<template>
  <div class="department-card" @click="handleClick">
    <!-- 科室图标 -->
    <div class="dept-icon">
      <svg v-if="department.icon === 'internal'" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <svg v-else-if="department.icon === 'surgery'" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <polyline points="10 9 9 9 8 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <svg v-else-if="department.icon === 'pediatrics'" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="5" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V2a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H22a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <svg v-else-if="department.icon === 'gynaecology'" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="5" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M19 12c0 1.52-2.55 6-10 6s-10-4.48-10-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M15 18v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9 18v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <svg v-else width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 7h-3a2 2 0 0 1-2-2V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 22H5a2 2 0 0 1-2-2v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M2 12h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M22 22l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    
    <!-- 科室信息 -->
    <div class="dept-info">
      <div class="dept-header">
        <h3 class="dept-name">{{ department.name }}</h3>
        <span class="match-rate" v-if="department.matchRate">匹配度 {{ department.matchRate }}%</span>
      </div>
      
      <!-- 科室描述 -->
      <p class="dept-desc" v-if="department.description">{{ department.description }}</p>
      
      <!-- 排队信息 -->
      <div class="queue-info" v-if="department.queueInfo">
        <div class="queue-item">
          <span class="queue-label">当前排队：</span>
          <span class="queue-value">{{ department.queueInfo.current || 0 }} 人</span>
        </div>
        <div class="queue-item">
          <span class="queue-label">预计等待：</span>
          <span class="queue-value">{{ department.queueInfo.waitTime || 0 }} 分钟</span>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="dept-actions" v-if="showActions">
      <el-button type="primary" size="small" @click.stop="handleDetail">查看详情</el-button>
    </div>
    
    <!-- 推荐理由 -->
    <div class="recommend-reason" v-if="department.reason">
      <span class="reason-label">推荐理由：</span>
      <span class="reason-text">{{ department.reason }}</span>
    </div>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus'

// 组件属性
const props = defineProps({
  department: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      name: '',
      icon: 'default',
      description: '',
      matchRate: 0,
      queueInfo: {
        current: 0,
        waitTime: 0
      },
      reason: ''
    })
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

// 组件事件
const emit = defineEmits(['click', 'detail'])

// 点击卡片处理
const handleClick = () => {
  emit('click', props.department)
}

// 查看详情处理
const handleDetail = () => {
  emit('detail', props.department)
}
</script>

<style scoped>
.department-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.department-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dept-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: #f0f9ff;
  color: #3b82f6;
}

.dept-info {
  flex: 1;
}

.dept-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dept-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.match-rate {
  font-size: 14px;
  color: #10b981;
  font-weight: 500;
}

.dept-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.queue-info {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.queue-label {
  font-size: 14px;
  color: #999;
}

.queue-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.dept-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.recommend-reason {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #f0f0f0;
  font-size: 13px;
  color: #666;
}

.reason-label {
  color: #999;
}

.reason-text {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .department-card {
    padding: 16px;
  }
  
  .dept-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }
  
  .dept-icon svg {
    width: 32px;
    height: 32px;
  }
  
  .dept-name {
    font-size: 16px;
  }
  
  .queue-info {
    flex-direction: column;
    gap: 8px;
  }
}
</style>